﻿@page "/team"
@inherits MasaComponentBase;
@inject MasaBlazor MasaBlazor

<PageTitle>@T("Team")</PageTitle>

<CascadingValue Value="this">
    <MTabs ValueChanged="TabValueChangedAsync" Value="_curTab" SliderColor="transparent" class="pro-nav remover-ripple">
        <MTab class="text-capitalize pa-0">
            <ChildContent>
                <span class="mtab-tab-line mtab-tab-linear-primary"></span>
                <span class="rounded-circle mtab-tab-indicator mtab-tab-indicator-primary"></span>
                <span class="mtab-tab-title">@T("Team detail")</span>
            </ChildContent>
        </MTab>
        <MTab class="text-capitalize pa-0" Disabled="_teamDetailDisabled">
            <ChildContent>
                <span class="mtab-tab-line @(_curTab.ToInt32()>0?"mtab-tab-linear-primary":"mtab-tab-linear-neutral")"></span>
                <span class="rounded-circle mtab-tab-indicator @(_curTab.ToInt32()>0?"mtab-tab-indicator-primary":"mtab-tab-indicator-neutral")"></span>
                <span class="mtab-tab-title">@T("Project detail")</span>
            </ChildContent>
        </MTab>
        <MTab class="text-capitalize pa-0" Disabled="_configDisabled">
            <ChildContent>
                <span class="mtab-tab-line @(_curTab.ToInt32()>1?"mtab-tab-linear-primary":"mtab-tab-linear-neutral")"></span>
                <span class="rounded-circle mtab-tab-indicator @(_curTab.ToInt32()>1?"mtab-tab-indicator-primary":"mtab-tab-indicator-neutral")"></span>
                <span class="mtab-tab-title">@T("Config detail")</span>
            </ChildContent>
        </MTab>
    </MTabs>

    <MTabsItems Style="background-color: transparent !important;" Value="_curTab" class="pt-6">
        <MTabItem>
            <div class="d-flex">
                <div class="pr-6" style="width: calc(100% - 300px); display:block;">
                    <div style="overflow: hidden;">
                        <div class="d-flex justify-space-between align-center">
                            <div class="emphasis--text h6 mr-3" style="float:left;display:block;">@_userTeam.Name</div>
                            <div style="width:300px;">
                                <SSearch @bind-Value="_projectName" OnEnter="SearchProject" Height="40" Dense BackgroundColor="#fff" MaxWidth="0" Placeholder="@T("Please enter the project name and press enter to query")" />
                            </div>
                        </div>
                        <div class="mt-6" style="height: calc(100vh - 256px); overflow: hidden; position: relative;">
                            <ProjectList @ref="_projectListComponent"
                                         FetchProjectCount="ProjectCountHandler"
                                         TeamId="_teamId"
                                         OnNameClick="NavigateToAppAsync"
                                         OnAppCardClick="NavigateToConfigAsync"
                                         OnAppPinClick="AppPinAsync" />
                        </div>
                    </div>
                </div>

                <MNavigationDrawer Right Permanent Class="rounded-4" Width="300" Style="height: calc(100vh - 192px) !important;">
                    <div class="py-4 px-6" style="min-width:300px; display:flex; flex-direction:column; overflow: auto;">
                        <MAvatar>
                            <MImage Height="48" Width="48" Src="@_userTeam.Avatar"></MImage>
                        </MAvatar>
                        <MRow NoGutters Class="mt-6">
                            <div class="emphasis--text h6">@_userTeam.Name</div>
                        </MRow>
                        <MRow NoGutters Class="mt-1 regular--text body2">
                            @T("ProjectCount")：
                            <span class="subtitle2">@_projectCount</span>
                        </MRow>
                        <MRow NoGutters Class="mt-4 regular--text body2">
                            @_userTeam.Description
                        </MRow>
                        <MRow NoGutters Class="regular3--text btn mt-6">@T("Admin")</MRow>
                        @foreach (var item in _userTeam.Admins)
                        {
                            <MRow Align="AlignTypes.Center" NoGutters Class="mt-4 regular--text body2">
                            <MAvatar Class="mr-3">
                                <MImage Height="48" Width="48" Src="@item.Avatar"></MImage>
                            </MAvatar>
                            @item.DisplayName
                            </MRow>
                        }
                        <MRow NoGutters Class="regular3--text btn mt-6">@T("Members")</MRow>
                        @foreach (var item in _userTeam.Members)
                        {
                            <MRow Align="AlignTypes.Center" NoGutters Class="mt-4 regular--text body2">
                            <MAvatar MinHeight="40" MinWidth="40" Height="40" Width="40" Class="mr-3">
                                <MImage Height="40" Width="40" Src="@item.Avatar"></MImage>
                            </MAvatar>
                            @item.DisplayName
                            </MRow>
                        }
                    </div>
                </MNavigationDrawer>
            </div>
        </MTabItem>
        <MTabItem>
            <Masa.Dcc.Web.Admin.Rcl.Pages.App ProjectId="_appModel.ProjectId"
                                              @ref="_app">
            </Masa.Dcc.Web.Admin.Rcl.Pages.App>
        </MTabItem>
        <MTabItem>
            <Config AppId="@_configModel.AppId"
                    ConfigObjectType="@_configModel.ConfigObjectType"
                    EnvironmentClusterId="@_configModel.EnvironmentClusterId"
                    ProjectId="@_configModel.ProjectId"
                    ProjectIdentity="@_configModel.ProjectIdentity"
                    @ref="_config">
            </Config>
        </MTabItem>
    </MTabsItems>
</CascadingValue>